<script setup>
import {useFullscreen} from '@vueuse/core'
import {router, usePage} from '@inertiajs/vue3'
import {computed} from "vue";
import http from "@/lib/http";
import {route} from "ziggy-js";
import Search from "./Search.vue";
import {Message} from "@arco-design/web-vue";

const {isFullscreen, toggle: toggleFullScreen} = useFullscreen()
const page = usePage();

const config = computed(() => {
    return page.props.config ?? {
        short_name: '管理系统',
        logo: '/static/images/logo.png'
    }
})

const userInfo = page.props.auth ?? {};
const handleRefresh = () => {
    window.location.reload();
}

const handleClearCache = () => {
    http.get(route('admin.clear-cache'));
    Message.success('缓存已清除');
}

const handleUserInfo = () => {

}

const handleUserPassword = () => {

}

const handleLogout = () => {
    router.get(route('admin.logout'));
}
</script>

<template>
    <div class="app-header shrink-0 w-full h-[72px] flex items-center justify-between">
        <div class="logo w-[240px] h-[72px] flex items-center px-4 gap-3">
            <a-avatar
                :size="42"
                :style="{ backgroundColor: 'unset', '--border-radius-medium': '6px' }"
                class="cursor-pointer flex shrink-0 rounded-[12px]"
                shape="square"
            >
                <img :alt="config.short_name" :src="config.logo"/>
            </a-avatar>
            <div
                class="logo-text text-shadow-lg/30 text-[18px] text-white truncate font-mono font-semibold tracking-wide  ">
                {{ config.short_name ?? '管理系统' }}
            </div>
        </div>
        <div class="flex-1 h-[72px] flex items-center justify-between gap-4 pr-6">
            <div class="flex-1 flex items-center gap-4 overflow-hidden">
                <Search/>

                <a-button class="nav-btn shrink-0" shape="circle" type="dashed">
                    <template #icon>
                        <icon-command/>
                    </template>
                </a-button>

                <a-button class="nav-btn shrink-0" shape="circle" type="dashed">
                    <template #icon>
                        <icon-common/>
                    </template>
                </a-button>
            </div>
            <div class="flex shrink-0 items-center gap-4">
                <a-button class="nav-btn shrink-0" shape="circle" type="dashed" @click="handleRefresh()">
                    <template #icon>
                        <icon-refresh/>
                    </template>
                </a-button>

                <a-button class="nav-btn shrink-0" shape="circle" type="dashed" @click="handleClearCache()">
                    <template #icon>
                        <icon-delete/>
                    </template>
                </a-button>

                <a-button class="nav-btn" shape="circle" type="dashed" @click="toggleFullScreen">
                    <template #icon>
                        <icon-fullscreen-exit v-if="isFullscreen"/>
                        <icon-fullscreen v-else/>
                    </template>
                </a-button>

                <a-dropdown trigger="click">
                    <a-avatar :size="32" :style="{ backgroundColor: '#006cff' }" class="nav-btn cursor-pointer">
                        <img :src="userInfo.avatar ?? '/static/images/avatar.png'" alt="avatar"/>
                    </a-avatar>
                    <template #content>
                        <a-doption>
                            <a-space @click="handleUserInfo">
                                <icon-user/>
                                <span> 用户中心 </span>
                            </a-space>
                        </a-doption>
                        <a-doption>
                            <a-space @click="handleUserPassword">
                                <icon-lock/>
                                <span> 修改密码 </span>
                            </a-space>
                        </a-doption>
                        <a-doption>
                            <a-space @click="handleLogout">
                                <icon-export/>
                                <span> 退出登录 </span>
                            </a-space>
                        </a-doption>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.nav-btn {
    box-shadow: 0 8px 4px rgba(0, 0, 0, 0.1), 0 6px 4px rgba(0, 0, 0, 0.1);

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
}
</style>
